<template>
<div class="index-container">
  <x-header>个人主页</x-header>
<scroller :noDataText="noDataText" :on-refresh="refresh" :on-infinite="infinite" style="min-height: 500px;padding-top:46px;" ref="my_scroller">
  <div>
    <div class="index-bg">
      <div class="index-bgimg">
         <img :src="userInfo.bgImage || require('../../assets/personBg.jpg')" alt="">
         <avatar class="my-avatar" username="Lairenna" :src="userInfo.avatar" :size="80"></avatar>
      </div>
      <!-- <div class="return-btn" @click="_return">
        <div class="left-arrow"></div>
      </div> -->
      <x-button v-if="( !$route.query.userId && currentUser._id ) || ($route.query.userId === currentUser._id)" class="index-edt-btn" @click.native="_editor">编辑资料</x-button>
      <span v-else class="edit-btns">
        <span @click="handleToService"><i style="color:#53B499;" class="icon-buoumaotubiao14"></i></span>
        <span><i style="color:#CDAE52;" class="icon-jiaguanzhu1" @click="handleFocusman({creator: {avatar:userInfo.avatar,nickname:userInfo.nickname}})"></i></span>
        <span><i style="color:#E09B43;" class="icon-gengduo2" @click="showConfirm1=true"></i></span>
      </span>
    </div>
    <div class="index-data">
      <p class="nick-name">
        <span>{{userInfo.nickname || '暂无昵称'}}</span>
        <i :class="userInfo.gender==='男'?'icon-c_icon_nan':'icon-c_icon_nv'"></i>
      </p>
      <p>
        <span style="padding-right:10px;">{{userInfo.schoolName || '浙江财经大学'}}</span>
        <span>{{userInfo.college || '某某学院'}}</span>
      </p>
      <p>
        <span style="padding-right:10px;">{{userInfo.major || '某某专业'}}</span>
        <span>{{userInfo.grade || '某某年级'}}</span>
      </p>
    </div>
    <p class="posting-header">全部帖子</p>
    <div class="index-posting">
      <item-list @remove="handleRemove" :datalist="list" @focusman="handleFocusman" :hasAttenArr="[]" :hasLikeArr="[]"></item-list>
    </div>
  </div>
</scroller>
<actionsheet
  v-model="showConfirm"
  :menus="cacelList"
  show-cancel
  @on-click-menu="clickMenu">
</actionsheet>
  <actionsheet
    v-model="showConfirm1"
    :menus="cacelList1"
    show-cancel
    @on-click-menu="click1">
  </actionsheet>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import Avatar from 'vue-avatar';
import ItemList from '@/views/common/Item';
import { getUnixTime } from '../../js/utils'
import {
  Actionsheet,
  XButton,
  XHeader
} from 'vux';
const IndexStore = namespace('login');
const HomeStore = namespace('home');

@Component({
  components: {
    Avatar,
    ItemList,
    Actionsheet,
    XButton,
    XHeader
  }
})
export default class PersonInfoIndex extends Vue {
  @HomeStore.Action getUnWatchPost;
  @HomeStore.Action getSaveCollect;
  @IndexStore.Action getViewUserInfo;
  @IndexStore.State userInfo
  @HomeStore.Action getWatchUser;
  currentItem = null
  showConfirm1 = false
  list = []
  currentPage = 1
  currentUser = (localStorage.getItem('loginInfo') && JSON.parse(localStorage.getItem('loginInfo')).user) || ''
  cacelList1 = {
    1: '举报'
  }
  id = null
  myId = null
  myTime = new Date()
  pageSize = 10
  currentUser = ''
  showConfirm = false
  validcode = ''
  cacelList = {
  	0: '不再看到此条帖子',
  	1: '收藏',
    2: '举报'
    // 3: '不看此人'
  }
  handleToService () {
    let val = JSON.stringify({
      _id: this.$route.query.userId,
      nickname: this.userInfo.nickname,
      avatar: this.userInfo.avatar
    })
    localStorage.setItem('receiverInfo', val)
    this.$router.push('/chatlist/1')
  }
  click1 (key) {
    if (key === '1') {
      const { _id, avatar, nickname } = this.currentUser;
      const info = {
        _id,
        creator: {_id, avatar, nickname},
        type: 'user'
      }
      this.$router.push({
        path: `/report`,
        query: {
          info
        }
      })
    }
  }
  init () {
    this.myId = (this.$route.query && this.$route.query.userId) || this.currentUser._id
    const params = {
      userId: this.myId,
      current: this.currentPage,
      pageSize: this.pageSize,
      createTime: getUnixTime(this.myTime)
    }
    this.getViewUserInfo(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        const { posts } = this.userInfo
        this.list = this.list.concat(posts)
      }
    })
  }
  clickMenu (key, value) {
    if (key === '2') {
      const { _id, avatar, nickname } = this.currentUser;
      const info = {
        _id,
        creator: {_id, avatar, nickname},
        type: 'user'
      }
      this.$router.push({
        path: `/report`,
        query: {
          info
        }
      })
    }
    if (key === '1') {
      const params = {
        postId: this.id,
        userId: this.userInfo._id
      }
      this.getSaveCollect(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.$vux.toast.text('收藏成功', 'middle');
        }
      })
    }
    if (key === '0') {
      const params = {
        postId: this.id
      }
      this.getUnWatchPost(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.$vux.toast.text('已不再看到此帖子', 'middle');
        }
      })
    }
  }
  noDataText = '--我也是有底线的--'
  infinite () {
    this.init()
    this.currentPage++
    setTimeout(() => {
      this.$refs.my_scroller.finishInfinite(true)
    }, 1000)
  }
  refresh () {
    this.myTime = new Date()
    setTimeout(() => {
      this.list = []
      this.currentPage = 1
      this.$refs.my_scroller.finishPullToRefresh()
    }, 1000)
  }
  handleRemove (item) {
    this.currentItem = item
    this.id = item._id
    this.showConfirm = true
  }
  handleFocusman (item) {
    const params = {
      status: 0,
      user2Obj: item.creator || ''
    }
    this.getWatchUser(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.$vux.toast.text('关注成功', 'middle');
      }
    })
  }
  _return () {
    this.$router.go(-1)
  }
  _editor () {
    let user = this.currentUser
    this.$router.replace({
      path: '/personinfo',
      query: {
        user
      }
    })
  }
}
</script>
<style lang="less">
  .index-container {
    width: 100%;
    overflow: auto;
    height: 100%;
    background: #f4f4f4;
    .icon-c_icon_nan {
      color: #74b8eb;
    }
    .icon-c_icon_nv {
      color: #ff3ec9;
    }
    .index-bg{
      height: 30%;
      background-size: 100%;
      background-position: center;
      position: relative;
      .return-btn{
        color: #fff;
        padding: 20px;
        box-sizing: border-box;
        position: absolute;
        top: -10px;
        left: -3px;
      }
      .index-bgimg{
        width: 100%;
        height: 170px;
        position: relative;
        .my-avatar {
          position: absolute;
          bottom: -30px;
          left: 5%;
        }
        img{
          width:100%;
          height: 100%;
          position: absolute;
        }
      }
      .index-ava{
        position: absolute;
        bottom: -25px;
        left: 30px;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        border: 1px solid #ccc;
      }
    }
    .index-edt-btn{
      width: 77px;
      line-height: 28px !important;
      // font-size: 12px;
      position: absolute;
      bottom: -40px;
      right: 20px;
      border-color: #60B295;
      color: #5F5F5F;
    }
    .edit-btns{
      position: absolute;
      bottom: -40px;
      right: 10px;
      span {
        width: initial;
        padding: 10px;
      }
      i {
        font-size: 20px;
      }
    }
    .index-data{
      background: #fff;
      overflow: auto;
      padding-bottom: 15px;
      p {
        line-height: 24px;
        padding-left: 8%;
        color: #5F5F5F;
      }
    }
    .posting-header{
      line-height: 26px;
      padding-left: 8%;
      margin-top: 5px;
      color: #BDBDBD;
    }
    .weui-cell:before {
      content: initial;
    }
    .nick-name {
      line-height: 24px;
      margin: 34px 0 10px 0;
      font-size: 16px;
      color:#414042 !important;
    }
    .index-posting{
      width: 99%;
      margin: 0 auto;
      ul{
        list-style: none;
        li{
          margin-bottom: 10px;
          border-radius: 10px;
          background: #fff;
          border: 1px solid #f3f3f3;
          padding: 5px 20px;
          .post-body{
            width: 100%;
            word-break:break-all;
          }
          .post-img{
            width: 100%;
            display: flex;
            img{
              flex: 1;
              width: 100%;
            }
          }
        }
      }
    }
    .vux-x-icon {
      fill: #fff;
    }
    .cell-x-icon {
      display: block;
      fill: green;
    }
  }
</style>
